<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--3.使用组件,v-bind动态绑定-->
  <lk-box :brand="msg1" :colleges="msg2"></lk-box>
</div>

<!--局部组件模板-->
<template id="box">
  <div>
    <h1>{{brand}}</h1>
    <ul>
      <li v-for="item in colleges">{{item}}</li>
    </ul>

  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  // 1.注册一个局部组件(子组件)
  const Box = {
    // 子组件接收数据(父传子)
    props: ['brand','colleges'],
    template: '#box'
  };

  // 2.将子组件在父组件里面注册
  const app = Vue.createApp({
    data(){
      return {
        msg1: '技能掌握',
        msg2: ['Web','Python','Java']
      }
    },
    components: {
      // 子组件注册
      'lk-box': Box
    }
  });


  // 挂载vue实例
  app.mount('#app');
</script>
</body>
</html>